<template>

	<view class="page-wraper">
		<view class="page-header" v-if="isSingle == 0">
			<!-- <view>
				<button type="primary" @click="clickSelect">确认选择</button>
			</view> -->
			<view style="font-size:12px;padding-bottom: 5px;font-weight: bold;">人员快捷选择</view>

			<view class="example-body">
				<view class="tag-view">
					<uni-tag text="全员" type="primary" @click="selectAll()" :inverted="!all" /> &nbsp;
				</view>
				<view class="tag-view" v-for="(item, idx) in userGroupList" :key="idx">
					<uni-tag :text="item.name" type="primary" @click="selectGroup(idx)" :inverted="!item.all" /> &nbsp;
				</view>
			</view>
		</view>


		<view class="page-main">
			<scroll-view class="page-main-scroll" scroll-y="true" scroll-with-animation="true">

				<checkbox-group>
					<view v-if="isSingle == 0" class="all" @click="selectAll()">
						<uni-row>
							<uni-col :span="18">部门组织</uni-col>
							<uni-col :span="6" style="text-align: right;">
								<!-- <checkbox value="cb" :checked="all" /> -->
								<text class="gou">{{isSingle == 0&&all ? '√' : ' '}}</text>
							</uni-col>
						</uni-row>
					</view>

					<view v-for="(item, index) in contactList" :key="index">
						<view class="depart" @click="selectDepart(index)">
							<uni-row>
								<uni-col :span="18">{{item.name}}</uni-col>
								<uni-col :span="6" style="text-align: right;">
									<!-- <checkbox v-if="isSingle == 0" :checked="item.selected" /> -->
									<text class="gou">{{isSingle == 0&&item.selected ? '√' : ' '}}</text>
								</uni-col>
							</uni-row>
						</view>

						<view v-for="(item1, index1) in item.userList" :key="index1">
							<view class="user" @click="selectUser(index, index1)">
								<uni-row>
									<uni-col :span="18">{{item1.name}}-{{item1.positionName}}</uni-col>
									<uni-col :span="6" style="text-align: right;">
										<!-- <checkbox :checked="item1.selected" /> -->
										<text class="gou">{{item1.selected ? '√' : ' '}}</text>
									</uni-col>
								</uni-row>
							</view>
						</view>
					</view>
					<view class="data-null">&nbsp;</view>
				</checkbox-group>
			</scroll-view>
		</view>
		<view>
			<view class="page-footer">
				<button type="primary" @click="clickSelect">确认选择</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		websock
	} from '../../net/websock'

	export default {

		data() {
			return {
				liststa: 0,
				contactList: [],
				userGroupList: [],
				isSingle: 0,
				all: 0,
				departments: [],
			}
		},
		async onLoad(params) {
			uni.$on('refresh_contact', this.refresh_contact)
			let selectedUsers = JSON.parse(params.selectedUsers || '[]')
			this.isSingle = params.isSingle || 0

			let departments = JSON.parse(params.departments || '[]')

			try {
				// this.contactList = JSON.parse(JSON.stringify(await websock.getContactList()))
				this.contactList = []

				let contactList = JSON.parse(JSON.stringify(await websock.getContactList()))
				console.log('contact list', contactList)
				if (departments.length != 0) {
					for (let i = 0; i != contactList.length; i++) {
						for (let j = 0; j != departments.length; j++) {
							if (contactList[i].departmentId == departments[j]) {
								this.contactList.push(contactList[i])
							}
						}
					}
				} else {
					this.contactList = contactList
				}

				console.log('contact list on ready', this.contactList)
				for (let i = 0; i != selectedUsers.length; i++) {
					for (let j = 0; j != this.contactList.length; j++) {
						for (let k = 0; k != this.contactList[j].userList.length; k++) {
							if (this.contactList[j].userList[k].uid == selectedUsers[i].uid) {
								this.contactList[j].userList[k].selected = 1
							}
						}
					}
				}

				if (departments.length == 0) {
					this.userGroupList = await websock.getUserGroupList()
				}
				console.log('user group list', this.userGroupList)
			} catch (e) {
				console.error(e)
				uni.showToast({
					title: e.message
				})
			}
		},
		onUnload() {
			uni.$off('refresh_contact', this.refresh_contact)
		},
		methods: {
			openlist() {
				this.liststa = 1
			},
			closelist() {
				this.liststa = 0
			},
			selectAll() {
				console.log('selectAll', 1)
				if (this.isSingle) return
				if (this.all) {
					this.all = 0
					for (let i = 0; i != this.contactList.length; i++) {
						let departInfo = this.contactList[i]
						departInfo.selected = 0
						for (let j = 0; j != departInfo.userList.length; j++) {
							departInfo.userList[j].selected = 0
						}
					}
				} else {
					this.all = 1
					for (let i = 0; i != this.contactList.length; i++) {
						let departInfo = this.contactList[i]
						departInfo.selected = 1
						for (let j = 0; j != departInfo.userList.length; j++) {
							departInfo.userList[j].selected = 1
						}
					}
				}

				this.checkGroup()
			},
			selectGroup(idx) {
				if (this.isSingle) return
				if (this.userGroupList[idx].all) {
					let userlist = this.userGroupList[idx].userlist
					if (!userlist) return
					for (let k = 0; k != userlist.length; k++) {
						let uid = userlist[k]
						for (let i = 0; i != this.contactList.length; i++) {
							let departInfo = this.contactList[i]
							for (let j = 0; j != departInfo.userList.length; j++) {
								if (departInfo.userList[j].uid == uid) {
									departInfo.userList[j].selected = 0
								}
							}
						}
					}
				} else {
					let userlist = this.userGroupList[idx].userlist
					if (!userlist) return
					for (let k = 0; k != userlist.length; k++) {
						let uid = userlist[k]
						for (let i = 0; i != this.contactList.length; i++) {
							let departInfo = this.contactList[i]
							for (let j = 0; j != departInfo.userList.length; j++) {
								if (departInfo.userList[j].uid == uid) {
									departInfo.userList[j].selected = 1
								}
							}
						}
					}
				}

				this.checkGroup()
			},
			selectDepart(index) {
				console.log('selectDepart', index)
				if (this.isSingle) return
				let departInfo = this.contactList[index]
				if (departInfo.selected) {
					departInfo.selected = 0
					for (let i = 0; i != departInfo.userList.length; i++) {
						departInfo.userList[i].selected = 0
					}
					this.all = 0
				} else {
					departInfo.selected = 1
					for (let i = 0; i != departInfo.userList.length; i++) {
						departInfo.userList[i].selected = 1
					}

					let allSelect = 1
					for (let i = 0; i != this.contactList.length; i++) {
						if (!this.contactList[i].selected) {
							allSelect = 0
							break
						}
					}
					this.all = allSelect
				}

				this.checkGroup()
			},
			selectUser(index1, index2) {
				console.log('select user', index1, index2)
				let userInfo = this.contactList[index1].userList[index2]
				if (userInfo.selected) {
					userInfo.selected = 0
					this.contactList[index1].selected = 0
					this.all = 0
				} else {

					if (this.isSingle) {
						for (let i = 0; i != this.contactList.length; i++) {
							for (let j = 0; j != this.contactList[i].userList.length; j++) {
								this.contactList[i].userList[j].selected = 0
							}
						}
					}

					userInfo.selected = 1
					let departInfo = this.contactList[index1]
					let departAll = 1
					for (let i = 0; i != departInfo.userList.length; i++) {
						if (!departInfo.userList[i].selected) {
							departAll = 0
							break
						}
					}
					this.contactList[index1].selected = departAll

					let allSelect = 1
					for (let i = 0; i != this.contactList.length; i++) {
						if (!this.contactList[i].selected) {
							allSelect = 0
							break
						}
					}
					this.all = allSelect
				}

				this.checkGroup()
			},
			checkGroup() {
				console.log('check group')
				// 查询已经选中的id
				let selectedIds = []
				for (let i = 0; i != this.contactList.length; i++) {
					let userList = this.contactList[i].userList
					for (let j = 0; j != userList.length; j++) {
						if (userList[j].selected) {
							let isExists = false
							for (let k = 0; k != selectedIds.length; k++) {
								if (selectedIds[k] == userList[j].uid) {
									isExists = true
									break
								}
							}
							if (!isExists) {
								selectedIds.push(userList[j].uid)
							}
						}
					}
				}

				console.log('click select', selectedIds)
				// 判断在分组中是否都存在
				for (let i = 0; i != this.userGroupList.length; i++) {
					let groupIds = this.userGroupList[i].userlist
					console.log(i, groupIds)
					let all = true
					for (let j = 0; j != groupIds.length; j++) {
						if (selectedIds.indexOf(groupIds[j]) == -1) {
							all = false
							break
						}
					}
					this.userGroupList[i].all = all
				}
			},
			clickSelect() {
				console.log('click contact item')

				let contactList = []
				for (let i = 0; i != this.contactList.length; i++) {
					let userList = this.contactList[i].userList
					for (let j = 0; j != userList.length; j++) {
						if (userList[j].selected) {
							let isExists = false
							for (let k = 0; k != contactList.length; k++) {
								if (contactList[k].uid == userList[j].uid) {
									isExists = true
									break
								}
							}
							if (!isExists) {
								contactList.push({
									uid: userList[j].uid,
									name: userList[j].name,
									avatar: userList[j].avatar,
									ruzhiDate: userList[j].ruzhiDate,
									sta: userList[j].sta,
									positionName: userList[j].positionName
								})
							}
						}
					}
				}

				console.log('click select', contactList)

				let eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('contactList', { contactList })
				uni.navigateBack()
			},
			async refresh_contact() {
				try {
					this.contactList = await websock.getContactList()
					console.log('contact list on ready', this.contactList)
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			}
		}
	}
</script>

<style>
	page {
		/* background-color: red; */
		/* width: 100vw;
		height: 100vh; */
		flex-shrink: 0;
		width: 100%;
		height: 100%;
	}

	.tab_bg {
		color: royalblue;
		font-weight: bold;
		text-align: center;
	}
</style>
<style lang="scss" scoped>
	.all {
		font-size: 16px;
		font-weight: bold;
		color: royalblue;
		background-color: #ddf3f4;
		// border-bottom: 1px solid #e6e6e6;
		height: 30px;
		padding: 13px 5px 0px 8px;
	}

	.depart {
		font-size: 16px;
		font-weight: bold;
		background-color: #F1F3F4;
		border-bottom: 1px solid #e6e6e6;
		height: 30px;
		padding: 10px 5px 0px 15px;
	}

	.data-null {
		line-height: 100rpx;
	}

	.user {
		font-size: 16px;
		// font-style: italic;
		background-color: white;
		border-bottom: 1px solid #e6e6e6;
		height: 30px;
		padding: 10px 5px 0px 25px;
	}

	.page-wraper {
		display: flex;
		// flex: 1;
		flex-direction: column;
		width: 100%;
		height: 100vh;
	}

	.page-header {
		// line-height: 100rpx;
		padding: 10px;
		/* 不放大不缩小固定100rpx */
		flex: 0 0 100rpx;
	}

	.page-main {
		flex: 1;
		position: relative;
	}



	.page-main-scroll {
		// flex: 1;
		position: absolute;
		// height: 100vh;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.page-main-list {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #e0e0e0;

	}

	.page-footer {
		// color: #fff;
		line-height: 100rpx;
		/* 不放大不缩小固定100rpx */
		flex: 0 0 100rpx;
		// background-color: #00AAFF;
		// padding: 20px;
	}

	.gou {
		font-weight: bold;
		color: royalblue;
		padding-right: 10px;
	}

	.example-body {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		flex-wrap: wrap;

	}

	.tag-view {
		margin-right: 3px;
		padding-bottom: 10px;

	}
</style>
